<template>
  <div class="aaa">
    <div class="left1">
      <div class="edit">
        <i class="el-icon-edit" style="font-size: 24px; color: #3a8ee6"></i>
      </div>

      <div class="block">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
      </div>
      <div class="detail">
        <div class="name">
          <h3>{{ info.name }}</h3>
        </div>
        <div class="discription">
          <h4>{{ info.kb_info }}</h4>
        </div>
        <div class="createtime">
          <span>创建时间:{{ info.create_time }}</span>
        </div>
      </div>
    </div>
    <div class="right1">
      <div class="top1">
        <el-breadcrumb separator="/" style="color: #c2c5cc">
       
        <el-breadcrumb-item class="myColor"> <span @click="nth_click" >首页</span></el-breadcrumb-item>
          <el-breadcrumb-item class="myColor">知识广场</el-breadcrumb-item>
          <el-breadcrumb-item class="myColor">{{
            info.name
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-input
            style="width: 300px"
            v-model="search"
            size="small"
            placeholder="搜索文件"
          />
          <el-button size="small" type="primary" @click="add"
            >新建文档</el-button
          >
        </div>
      </div>
      <el-dialog
        title="新建文档"
        append-to-body
        :visible.sync="dialogFormVisible"
      >
        <el-form>
          <el-upload
            class="upload-demo"
            drag
            :action="uploadUrl"
            ref="upload"
            :file-list="fileList"
            multiple
            :data="{ kb_name: info.kb_name }"
            :auto-upload="false"
            :on-change="handlePreview"
            :on-success="handleSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploadOk">确 定</el-button>
        </div>
      </el-dialog>
      <div class="regional_table">
        <el-table :data="tableData" height="500">
          <el-table-column align="center" type="index" label="序号">
          </el-table-column>
          <el-table-column align="center" label="文件名称" prop="name">
          </el-table-column>
          <el-table-column align="center" label="状态" prop="state">
            <!-- <span v-if="tableData.state==0">未解析</span>
            <span v-if="tableData.state==1">解析中</span>
            <div v-if="tableData.state==2">解析完成</div>
            <span v-if="tableData.state==3">解析失败</span> -->
            <!-- {{state}} -->
            <!-- {{tableData.state=='2'}} -->
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              > -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as zskApi from "@/api/zsk";
export default {
  props: {
    parentMessage:{
      type: String,
      default: "数值"
    }
  },
  data() {
    return {
      search: "",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      tableData: [],
      info: {},
      dialogFormVisible: false,
      fileList: [],
      fileName: "",
    };
  },
  computed: {

    uploadUrl() {
      return `/api/knowledge_base/upload_docs?file_id=${this.fileName}`;
    },
  },
  created() {
    // let id = this.$route.query.id;
    console.log(this.parentMessage);
    this.getInfo(this.parentMessage);
  },
  methods: {
    nth_click(){
      // this.$router.push({
      //   path: "/g_home",
    location.reload();
    // });
    },
    handlePreview(file, fileList) {
      this.fileName = file.name;
      this.fileList = fileList;
    },

    uploadOk() {
      if (this.fileList.length == 0) {
        this.$message.error("请上传文件");
        return;
      }
      this.$refs.upload.submit();
      this.getData();
    },
    handleSuccess() {
      this.getData();
    },

    getInfo(id) {
      zskApi.get(id).then((res) => {
        if (res.code == 1) {
          this.info = res.data;
          this.getData();
        }
      });
    },
    getData() {
      this.$http
        .get("/api/knowledge_base/list_files?kb_name=" + this.info.kb_name)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.tableData.forEach((element) => {
              switch (element.state) {
                case 0:
                  element.state = "未解析";
                  break;
                case 1:
                  element.state = "解析中";

                  break;
                case 2:
                  element.state = "解析完成";

                  break;
                case 3:
                  element.state = "解析失败";

                  break;

                default:
                  break;
              }
            });
            this.dialogFormVisible = false;
          }
        });
    },
    add() {
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("确认删除文档?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$http
            .post("/api/knowledge_base/delete_docs", {
              kb_name: this.info.kb_name,
              file_ids: [row.id],
            })
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getData();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.aaa {
  width: 100%;
  min-height: 80vh;
  margin: 100px 20px;
  display: flex;
  font-family: Source Han Sans;
  font-feature-settings: "kern" on;
  color: #000;
  overflow: hidden;
  box-sizing: border-box;
}
.left1 {
  width: 200px;
  background-color: #fff;
  padding: 10px;
}
.edit {
  display: flex;
  justify-content: flex-end;
}
.block {
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail {
  width: 80%;
  margin: 20px auto;
}
.right1 {
  width: 80%;
  margin: 0 auto;
  /* border: 1px solid red; */
  /* display: flex; */
  /* justify-content: space-between; */
  background-color: #fff;
  padding: 20px;
}
.top1 {
  /* margin: 20px 0; */
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  /* border: 1px solid red; */
}

.regional_table {
  /* border: 1px solid red; */
}
.regional_table /deep/ .el-table,
.regional_table /deep/ .el-table__expanded-cell {
  background-color: transparent;
  color: #c2c5cc;
}
/* 表格内背景颜色 */
.regional_table /deep/ .el-table th,
.regional_table /deep/ .el-table tr,
.regional_table /deep/ .el-table td {
  background-color: transparent !important;
  color: #000;
}
.myColor /deep/ .el-breadcrumb__inner {
  color: #000;
}
.el-input /deep/ .el-input__inner {
  background-color: transparent;
}
.el-dialog {
  width: 528px;
  height: 202px;
  border-radius: 30px;
}
.upload-demo {
  /* border: 1px solid red; */
}
.el-upload-dragger {
  height: 90px !important;
  /* border: 1px solid red; */
}
.el-icon-upload {
  margin: 0 auto;
}
</style>